<template>
  <nut-navbar v-show="navVisible" class="book-nav">
    <template #left>
      <Left />
    </template>
    <template #right>
      <div class="right-icon-wrap">
        <svg class="icon" aria-hidden="true" @click="handleAddClick">
          <use xlink:href="#icon-weijiashujia"></use>
        </svg>
      </div>
    </template>
  </nut-navbar>
  <div class="book-title" v-show="!navVisible"></div>
  <!-- <ReadEpub @toogleNav="toogleNavVisible" /> -->
  <ReadTxt @toogleNav="toogleNavVisible" />
  <div v-show="navVisible" class="bottom">
    <div class="bottom-menu">
        <svg class="icon" aria-hidden="true" @click="handleAddClick">
          <use xlink:href="#icon-menu"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="handleAddClick">
          <use xlink:href="#icon-menu"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="handleAddClick">
          <use xlink:href="#icon-menu"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="handleAddClick">
          <use xlink:href="#icon-menu"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="handleAddClick">
          <use xlink:href="#icon-menu"></use>
        </svg>
    </div>
   
  </div>
</template>
<script setup>
import { ref } from 'vue'
import ReadEpub from '@/components/ReadEpub.vue'
import ReadTxt from '@/components/ReadTxt.vue'
import { useRoute } from 'vue-router'
import { Left } from '@nutui/icons-vue'
const route = useRoute()
const id = route.params.id

const navVisible = ref(true)

const handleAddClick = () => {
  // Add to bookshelf
}

const toogleNavVisible = () => {
  navVisible.value = !navVisible.value
}
</script>
<style scoped>
.right-icon-wrap {
  font-size: 25px;
}
.book-nav {
  transition: all 1s;
}
.book-title {
  height: var(--nut-navbar-height, 44px);
}
.bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 44px;
    background-color: #fff;
}
.bottom-menu {
    height: 44px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>
